<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <title>我的下载</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../../../css/mui.min.css" rel="stylesheet" />
    <link href="../../css/common.css" rel="stylesheet" />
    <link href="../../css/helper.css" rel="stylesheet" />
    <style>
      .mui-table-view-cell {
        padding: 0 0;
      }
      
      .list-item {
        height: 67px;
        border-radius: 3px;
        margin-bottom: 13px;
        background-color: #ffffff;
        padding-left: 16px;
        padding-right: 13px;
      }
      
      .card-img-box {
        /* margin-right:16px; */
        height: inherit;
        min-width: 33px;
      }
      
      .card-img {
        width: 33px;
        height: 33px;
      }
      
      .card-content-box {
        padding: 0 16px;
        width: 70%;
      }
      
      .txt1 {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      
      .txt2 {
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #999999;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      
      .img-tool-box {
        width: 60px;
      }
      
      .img-tool-box .imgs {
        display: inline-block;
        width: 20px;
        height: 20px;
      }
      
      .img-tool {
        width: 19px;
        height: 19px;
        /* margin-top:10px; */
      }
      
      .img-19 {
        width: 19px;
        height: 19px;
      }
      
      .mui-table-view {
        margin-top: 44px;
        background-color: inherit;
        padding-left: 13px;
        padding-right: 13px;
        padding-top: 13px;
      }
      
      .mui-table-view-cell:after {
        background-color: #ffffff;
        margin-bottom: 13px;
        background-color: #ffffff;
      }
      
      .texts {
        text-align: right;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    </style>
  </head>

  <body>
    <div id="container" v-cloak>
      <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">我的下载</h1>
        <div class="img-tool-boxs">
          <img src="../../img/sousuo.png" class="img-tool fr" style="margin-left:13px;margin-top: 10px;" @click="search">
        </div>
      </header>
      <div class="mui-content">
        <!-- 1、slider items -->
        <div class="mui-bar mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary ">
          <a class="mui-control-item  mui-active" @tap="getType" href="#item1">标准规范库</a>
          <a class="mui-control-item" @tap="getDeviceList" href="#item2">设备资料库</a>
          <a class="mui-control-item" @tap="getTechType" href="#item3">技术交流</a>
          <a class="mui-control-item" @tap="getFaultList" href="#item4">故障案例集</a>
        </div>
        <!-- 1、列表 -->
        <div class="tab-content mui-slider-group">
          <div id="item1" class="mui-slider-item mui-control-content mui-active">
            <ul class="mui-table-view" id="tableitem1">
              <div class="mui-table-view-cell mui-media list-item f-r-b-c">
                <div class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary">
                  <a class="mui-control-item" v-for="(v,i) in typeList" :key="v.id" :class="i==0?'mui-active':''" href="#item0" @tap="getStandList(v)">{{v.n}}</a>
                  <!-- <a class="mui-control-item" href="#items2">验收制度</a>
                <a class="mui-control-item" href="#items3">监管制度</a> -->
                </div>
              </div>
              <li class="mui-table-view-cell mui-media list-item f-r-b-c" v-for="(item,index) in standList" :key="item.id" @tap="detail(item,1)">
                <div class="card-img-box f-r-c-c">
                  <img src="../../img/word.png" class="card-img ">
                </div>
                <div class="card-content-box fs">
                  <div class="txt1">{{item.fileName}}</div>
                  <div class="txt2">{{item.createName}}</div>
                </div>
                <!-- <div class="img-tool-box">
                  <span class="imgs" v-if="item.ic"><img src="../../img/shoucang_yishoucang.png" class="img-tool fr" style="margin-left:13px;"></span>
                  <span class="imgs" v-else><img src="../../img/shoucang_moren.png" class="img-tool fr" style="margin-left:13px;"></span>
                  <span class="imgs"><img src="../../img/knowledge/dianzan2.png" class="img-tool fr" style="margin-left:13px;"></span>
                </div> -->
              </li>
            </ul>
          </div>
          <div id="item2" class="mui-slider-item mui-control-content">
            <ul class="mui-table-view" id="tableitem2">
              <li class="mui-table-view-cell mui-media list-item f-r-b-c" v-for="(item,index) in deviceList" @tap="detail(item,2)" :key="item.id">
                <div class="card-img-box f-r-c-c">
                  <img src="../../img/word.png" class="card-img ">
                </div>
                <div class="card-content-box fs">
                  <div class="txt1">{{item.machineModel}}</div>
                  <div class="txt2">{{item.title}}</div>
                </div>
                <div class="img-tool-box">
                  <div class="texts">{{item.createName}}</div>
                  <!--<span class="imgs" v-if="item.ic"><img src="../../img/shoucang_yishoucang.png" class="img-tool fr" style="margin-left:13px;"></span>
				         <span class="imgs" v-else><img src="../../img/shoucang_moren.png" class="img-tool fr" style="margin-left:13px;"></span>
				         <span class="imgs"><img src="../../img/knowledge/dianzan2.png" class="img-tool fr" style="margin-left:13px;"></span>-->
                </div>
              </li>
            </ul>
          </div>
          <div id="item3" class="mui-slider-item mui-control-content">
            <ul class="mui-table-view" id="tableitem3">
              <div class="mui-table-view-cell mui-media list-item f-r-b-c">
                <div class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary">
                  <a class="mui-control-item" v-for="(v,i) in typeTechList" :key="v.id" :class="i==0?'mui-active':''" href="#items0" @tap="getTechList(v)">{{v.label}}</a>
                  <!-- <a class="mui-control-item mui-active" href="#itemss1">风机设备</a>
                 <a class="mui-control-item" href="#itemss2">光伏设备</a>
                 <a class="mui-control-item" href="#itemss3">变电设备</a>
                 <a class="mui-control-item" href="#itemss4">输出设备</a> -->
                </div>
              </div>
              <li class="mui-table-view-cell mui-media list-item f-r-b-c" v-for="(item,index) in techList" @tap="detail(item,3)" :key="item.id">
                <div class="card-img-box f-r-c-c">
                  <img src="../../img/word.png" class="card-img ">
                </div>
                <div class="card-content-box fs">
                  <div class="txt1">
                    <span v-if="item.isTop">【置顶】</span>
                    <span v-if="item.isBest">【精华】</span> {{item.title}}
                  </div>
                  <div class="txt2">{{item.createName}}</div>
                </div>
                <!--<div class="img-tool-box">
                 <span class="imgs" v-if="item.isCollection == 'true'"><img src="../../img/shoucang_yishoucang.png" class="img-tool fr"></span>
                 <span class="imgs" v-else><img src="../../img/shoucang_moren.png" class="img-tool fr" style="margin-left:13px;"></span>
                 <span class="imgs"><img src="../../img/knowledge/dianzan2.png" class="img-tool fr" style="margin-left:13px;"></span>
               </div>-->
              </li>
            </ul>
          </div>
          <div id="item4" class="mui-slider-item mui-control-content">
            <ul class="mui-table-view" id="tableitem4">
              <li class="mui-table-view-cell mui-media list-item f-r-b-c" v-for="(item,index) in faultList" @tap="detail(item,4)" :key="item.id">
                <div class="card-img-box f-r-c-c">
                  <img src="../../img/word.png" class="card-img ">
                </div>
                <div class="card-content-box fs">
                  <div class="txt2">{{item.fan}} - {{item.mon}}</div>
                  <div class="txt1">{{item.fn}}</div>
                  <div class="txt2">{{item.cn}}</div>
                </div>
               <!-- <div class="img-tool-box">
                  <div class="texts">{{item.fc}}</div>
                  <span class="imgs" v-if="item.ic"><img src="../../img/shoucang_yishoucang.png" class="img-tool fr" style="margin-left:13px;"></span>
                  <span class="imgs" v-else><img src="../../img/shoucang_moren.png" class="img-tool fr" style="margin-left:13px;"></span>
                  <span class="imgs"><img src="../../img/knowledge/dianzan2.png" class="img-tool fr" style="margin-left:13px;"></span>
                </div> -->
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <script src="../../../../js/mui.js"></script>
    <script src="../../../../js/mui.pullToRefresh.js"></script>
    <script src="../../../../js/mui.pullToRefresh.material.js"></script>
    <!-- <script src="../../../../js/jquery-1.7.2.min.js"></script> -->
    <script type="text/javascript" src="../../../../js/jquery-3.2.1.min.js"></script>
    <script src="../../../../js/vue.js"></script>
    <script src="../../js/mkeyplus.base.js"></script>
    <script src="../../js/sqlite.js"></script>
    <script type="text/javascript">
      mui.init()
      if(window.plus) {
        plusready();
      } else {
        document.addEventListener('plusready', plusready, false);
      }

      function plusready() {
        mui.DB.openSqlite();
        // 标准规范库
        mui.DB.selectTableData('typeStand').then(res => {
          console.log('表1', res)
          vm.typeList = res
          let serch = [{
            key: 'classifyCode',
            value: vm.typeList[0].id
          }]
          mui.DB.selectTableData('dataStand', serch).then(res => {
            console.log('表2', res)
            vm.standList = res
          }).catch(error => {
            console.log(error)
          })
        }).catch(error => {
          console.log(error)
        })

        // 技术交流
        mui.DB.selectTableData('types').then(res => {
          vm.typeTechList = res
          console.log('表21111', res)
          let tech = [{
            key: 'typeCode',
            value: vm.typeTechList[0].code
          }]
          mui.DB.selectTableData('dataTypes').then(res => {
            vm.techList = res
            console.log('表21111000', res)
          }).catch(error => {
            console.log(error)
          })
        }).catch(error => {
          console.log(error)
        })
        // 设备资料库
        mui.DB.selectTableData('dataDevice').then(res => {
          vm.deviceList = res
          console.log('表设备', res)
        }).catch(error => {
          console.log(error)
        })
        // 故障案例集
        mui.DB.selectTableData('dataFaults').then(res => {
          vm.faultList = res
          console.log('表设备', res)
        }).catch(error => {
          console.log(error)
        })

      }
      let vm = new Vue({
        el: "#container",
        data: {
          type: 1,
          form1: {
            page: 1,
            size: 20,
            system: 'APP',
            status: 1
          },
          form2: {
            page: 1,
            size: 20,
            system: 'APP',
            status: 1
          },
          form3: {
            page: 1,
            size: 20,
            system: 'APP',
            status: 1
          },
          form4: {
            page: 1,
            size: 20,
            system: 'APP',
            status: 1
          },
          collets: [{
              id: 1,
              title: '标准规范库'
            },
            {
              id: 2,
              title: '设备资料库'
            },
            {
              id: 3,
              title: '技术交流'
            },
            {
              id: 4,
              title: '故障案例集'
            },
          ],
          standList: [], //标准
          typeList: [],
          deviceList: [], //设备资料
          techList: [], //技术交流
          typeTechList: [],
          faultList: [], //故障案例
          formStand: {
            ids: '',
          },
          formdevi: {
            areaId: '',
            areaName: '',
          },
          formTech: {
            ids: '',
            valid: '',
            typeCodeName: '',
          },
          formfalt: {
            areaId: '',
            areaName: '',
          }
        },
        created: function() {
          console.log('1000', mui.DB)

          // let standLists= localStorage.getItem("downType")
          // let deviceLists= localStorage.getItem("downDevice")
          // let techTypes = localStorage.getItem("techType")
          // let downFaults = localStorage.getItem("downFault")
          // console.log('缓存1',JSON.parse(downFaults))
          // if(standLists){
          //   this.typeList=JSON.parse(standLists)
          //   this.standList=this.typeList[0].downList
          // }
          // if(deviceLists){
          //  let devices=JSON.parse(deviceLists)
          //   this.deviceList=devices.downList
          // }
          // if(techTypes){
          //   this.typeTechList=JSON.parse(techTypes)
          //   this.techList=this.typeTechList[0].downList
          // }
          // if(downFaults){
          //   let faults=JSON.parse(downFaults)
          //   this.faultList=faults.downList
          // }
          // this.getType()
          // this.getDeviceList()
          // this.getTechType()
          // this.getFaultList()
        },
        methods: {
          setObj(arr) {
            let newArr = []
            let obj = {}
            for(var i = 0; i < arr.length; i++) {
              if(!obj[arr[i].key]) {
                newArr.push(arr[i])
                obj[arr[i].key] = true
              }
            }
            return newArr
          },
          // 标准规范
          getType() {
            this.type = 1
          },
          getStandList(item) {
            console.log('表22', item.id)
            let items = [{
              key: 'classifyCode',
              value: item.id
            }]
            // this.standList=item.downList
            mui.DB.selectTableData('dataStand', items).then(res => {
              console.log('表2', res)
              vm.standList = res
            }).catch(error => {
              console.log(error)
            })

          },

          // 设备资料
          getDeviceList() {
            this.type = 2
          },
          // 技术交流
          getTechType() {
            this.type = 3
            this.getTechList(this.typeTechList[0])
          },
          getTechList(v) {
            console.log('表2wwww', v)
            // this.techList=v.downList
            let items = [{
              key: 'typeCode',
              value: v.code,
            }]
            mui.DB.selectTableData('technology', items).then(res => {
              console.log('表2', res)
              vm.techList = res
            }).catch(res => {
              console.log(res)
            })
          },
          // 故障案例
          getFaultList() {
            this.type = 4
            // this.ids=id;
          },
          detail(item, type) {
            let didss = {
              idss: item.id,
              ids: item.id,
              types: type,
              store: true
            }
            if(type == 1) {
              mui.baseApp.openWindow("../standard/detail.html", didss)
            } else if(type == 2) {
              mui.baseApp.openWindow("../device/detail.html", didss)
            } else if(type == 3) {
              mui.baseApp.openWindow("../technology/detail.html", didss)
            } else if(type == 4) {
              mui.baseApp.openWindow("../faultCase/detail.html", didss)
            } 
          },
          search() {
            mui.baseApp.openWindow("./search.html", {
              type: this.type
            })
          },
        },
      })
    </script>
  </body>

</html>